<template>
  <div>
    <div class="main_operation">
      <div class="operation_left">
        <a-button v-if="routerShow($route,'SetMeal_add')" class="mr10" type="primary" @click="addBtn">添加</a-button>
      </div>
      <div class="operation_right">
        <a-input-search v-model="formList.title" style="width:300px;" placeholder="请输入套餐名称" @search="onSearch" enterButton />
      </div>
    </div>
    <div class="main">
      <a-table
        :pagination="false"
        :loading="tableLoad"
        :columns="Fields"
        :dataSource="dataLists.data"
        :rowKey="record => record.id"
        :scroll="{x: 1400, y: 500 }"
      >
        >
        <template slot="action" slot-scope="text, record">
          <a-button v-if="routerShow($route,'SetMeal_update')" size="small" class="mr5" type="primary" @click="editBtn(record)">编辑</a-button>
          <a-button v-if="routerShow($route,'SetMeal_delete')" size="small" type="danger" @click="delBtn(record)">删除</a-button>
        </template>
      </a-table>
      <div class="pageBox">
        <a-pagination
          :total="dataLists.total"
          :showTotal="total => `共 ${total} 条数据`"
          :pageSize="dataLists.per_page"
          :defaultCurrent="1"
          @change="pageChange"
        />
      </div>
    </div>
    <!-- 添加编辑 -->
    <a-modal
      :maskClosable="false"
      :destroyOnClose="true"
      :title="titleModel"
      :width="800"
      v-model="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form>
        <a-form-item
          required
          label="套餐名称:"
          :label-col="{ md: 5,xs:24 }"
          :wrapper-col="{ md: 18,xs:24 }"
        >
          <a-input v-model="formItem.title" placeholder="请输入套餐名称" />
        </a-form-item>
        <a-form-item
          required
          label="选择方式:"
          :label-col="{ md: 5,xs:24 }"
          :wrapper-col="{ md: 18,xs:24 }"
        >
          <a-radio-group :options="plainOptions" v-model="formItem.type" @change="onChange"/>
        </a-form-item>
        <a-form-item
          required
          v-if="formItem.type != 1"
          :label="isType"
          :label-col="{ md: 5,xs:24 }"
          :wrapper-col="{ md: 18,xs:24 }"
        >
          <a-select v-if="formItem.type != 1" v-model="formItem.region" allowClear placeholder="请选择适用范围">
            <a-select-option v-for="item in selectData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
          </a-select>
          <!-- <a-cascader
              v-model="groupId"
              :fieldNames="{ label: 'name', value: 'id', children: 'parent' }"
              @change="groupChange"
              :options="groupData" placeholder="请选择适用范围" /> -->
        </a-form-item>
        <a-form-item
          required
          label="套餐费用:"
          :label-col="{ md: 5,xs:24 }"
          :wrapper-col="{ md: 18,xs:24 }"
        >
          <a-list itemLayout="horizontal" :split="false" :dataSource="mealFeeData">
            <a-list-item style="padding: 5px 0;" slot="renderItem" slot-scope="item, index">
              <span class="fxBox" style="width: 40px;">时长</span>
              <a-input-group compact style="width: 130px;" class="mr10">
                <a-input :min="0" type="number" v-model="mealFeeData[index].duration" style="width: 90px;" placeholder="时长" />
                <a-select :showArrow="false" v-model="mealFeeData[index].date_unit" style="width: 40px">
                  <a-select-option :value="1">月</a-select-option>
                  <a-select-option :value="2">年</a-select-option>
                </a-select>
              </a-input-group>
              <span class="fxBox" style="width: 40px;">原价:</span>
              <a-input class="mr5" :min="0" type="number" v-model="mealFeeData[index].price" style="width: 130px;" placeholder="原价" addonAfter="元" />
              <span class="fxBox" style="width: 40px;">现价:</span>
              <a-input class="mr5" :min="0" type="number" v-model="mealFeeData[index].cost" style="width: 130px;" placeholder="现价" addonAfter="元" />
              <a-icon class="fxBox iconStyle" style="color: #19be6b;" @click='addlist' v-if="index == 0" type="plus-circle" />
              <a-icon class="fxBox iconStyle" style="color: #ed4014;" @click="delList(index)" v-if="index > 0" type="close-circle" />
            </a-list-item>
          </a-list>
          </a-input>
        </a-form-item>
        <a-form-item
          required
          label="账号数量:"
          :label-col="{ md: 5,xs:24 }"
          :wrapper-col="{ md: 18,xs:24 }"
        >
          <a-input :min="0" type="number" v-model="formItem.account_num" placeholder="请输入账号费用">
          </a-input>
        </a-form-item>
        <a-form-item
          label="套餐简述:"
          :label-col="{ md: 5,xs:24 }"
          :wrapper-col="{ md: 18,xs:24 }"
        >
          <a-textarea :rows="4" v-model="formItem.desc" placeholder="请输入套餐简述"/>
          </a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
const plainOptions = [
    {label:'全部通用',value: 1},
    // {label:'按平台',value: 2},
    {label:'按代理',value: 3},
    {label:'按公司',value: 4}];
export default {
  name: "Account",
  data() {
    return {
      selectData: [],
      mealFeeData: [{
        duration: '',
        cost: '',
        date_unit: 1,
        price: '',
      }],
      groupId:[],
      plainOptions,
      /* 通用模块 */
      //列表
      tableLoad: false, //列表loading状态
      formList: {
        //列表信息
        title: '',
        page: 1
      },
      selectedRowKeys: [], //勾选的id
      /* 通用模块end */

      /* 添加编辑 */
      titleModel: "", //标题
      visible: false, //窗口显示隐藏
      confirmLoading: false, //按钮loading状态
      formItem: {
        title: '', //套餐名称
        type: 1,//套餐方式
        set_meal_fee: undefined,//套餐费用
        region: undefined,      // 适用范围
        account_num: '',  // 账号数量
        desc: '',         // 套餐简介
      },
      /* 添加编辑end */
    };
  },
  computed: {
    ...mapState({
      Fields: state => state.paymentAccount.Fields,
      dataLists: state => state.paymentAccount.dataLists,
      requestCode: state => state.paymentAccount.requestCode,
      groupData: state => state.group.groupData,
      // userPlatformAll: state => state.group.userPlatformAll, //平台all信息
      agentAllData: state => state.group.agentAllData, //代理all信息
      companyAllData: state => state.group.companyAllData, //公司all信息
    }),
    isType() {
      if(this.formItem.type == 1){
        this.selectData = []
        return '通用套餐'
      } else if (this.formItem.type == 2) {
        // this.selectData = this.userPlatformAll
        return '适用平台'
      } else if(this.formItem.type == 3) {
        this.selectData = this.agentAllData
        return '适用代理'
      } else if(this.formItem.type == 4) {
        this.selectData = this.companyAllData
        return '适用公司'
      }
    }
  },
  mounted() {
    // this.getUserPlatformAll() //平台all信息
    this.agentAll() //代理all信息
    this.companyAll() //公司all信息
    this.changeData();
  },
  methods: {
    // 添加费用
    addlist() {
      const { mealFeeData } = this
      const newData = {
          duration: '',
          cost: '',
          date_unit: 1,
          price: '',
      }
      this.mealFeeData = [...mealFeeData, newData]
    },
    // 删除费用
    delList(index) {
      const { mealFeeData } = this
      this.mealFeeData.splice(index, 1)
    },
    //   选择方式
    onChange(e) {
      // this.groupId = []
      if(e.target.value == 1){
        delete this.formItem.region
      } else {
        // this.groupAll(e.target.value)
        // this.groupId = []
        this.$set(this.formItem, 'region', undefined)
      }
    },
      // 分组选择
    groupChange(value) {
      console.log(value)
    	this.formItem.region = value[value.length-1]
      console.log(this.formItem)
    },
    /* 通用模块 */
    /* 接口 */
    ...mapActions({
      getLists: "paymentAccount/getLists", //列表
      dataAdd: "paymentAccount/dataAdd", //添加
      dataEdit: "paymentAccount/dataEdit", //编辑
      dataDel: "paymentAccount/dataDel", //删除
      // groupAll: 'group/groupDataAll', //公司分组信息
      // getUserPlatformAll: "group/getUserPlatformAll", //平台all信息
      agentAll: "group/agentAll", //代理all信息
      companyAll: "group/companyAll", //公司all信息
    }),
    // 勾选
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    // 重新获取列表数据
    changeData() {
      this.tableLoad = true;
      setTimeout(() => {
        this.getLists(this.formList);
        this.tableLoad = false;
      }, 800);
    },
    //搜索
    onSearch(val) {
      this.formList = {
        title: val,
        page: 1
      };
      this.changeData();
    },
    // 页码
    pageChange(page) {
      this.formList.page = page;
      this.getLists(this.formList);
    },
    /* 通用模块end */

    /* 添加编辑 */
    // 添加
    addBtn() {
      this.titleModel = "添加套餐";
      this.groupId = []
      this.formItem = {
        title: '', //套餐名称
        type: 1,//套餐方式
        region: undefined,      // 适用范围
        account_num: '',  // 账号数量
        desc: '',         // 套餐简介
        item:[]
      };
      this.mealFeeData = [{
          duration: '',
          cost: '',
          date_unit: 1,
          price: '',
      }]
      this.visible = true;
    },
    // 编辑
    editBtn(item) {
      console.log(item);
      this.mealFeeData = [{
          duration: '',
          cost: '',
          date_unit: 1,
          price: '',
      }]
      this.titleModel = "编辑套餐";
      this.formItem.id = item.id;
      this.formItem.title = item.title;
      this.formItem.type = Number(item.type);
      this.formItem.set_meal_fee = item.set_meal_fee;
      if(item.type == 1){
        // return '通用'
        delete this.formItem.region
      } else if (item.type == 2) {
        // return '适用平台'
        this.formItem.region = item.platform;
      } else if(item.type == 3) {
        this.formItem.region = item.agent;
        // return '适用代理'
      } else if(item.type == 4) {
        this.formItem.region = item.company;
        // return '适用公司'
      }
      this.formItem.account_num = item.account_num;
      this.formItem.desc = item.desc;
      this.mealFeeData = item.item
      this.visible = true;
    },
    // 窗口确定
    handleOk() {
      this.confirmLoading = true;
      this.formItem.item = this.mealFeeData
      console.log(this.formItem);
      if (this.titleModel == "添加套餐") {
        this.formList.page = 1
        this.dataAdd(this.formItem);
      } else {
        this.dataEdit(this.formItem);
      }
      setTimeout(() => {
        if (this.requestCode === 0) {
          this.visible = false;
          this.changeData();
          this.groupId = []
        }
        this.confirmLoading = false;
      }, 1000);
    },
    // 窗口取消
    handleCancel() {
      this.visible = false;
    },
    /* 添加编辑end */
    /* 删除 */
    delBtn(item) {
      let _this = this;
      this.$confirm({
        title: `您确定要删除套餐 ${item.title} 吗?`,
        content: `删除后将不可恢复,请仔细核对!`,
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          let ids = {
            id: item.id
          }
          _this.dataDel(ids);
          _this.changeData();
        }
      });
    }
  }
};
</script>

<style scoped>
  .iconStyle {
    cursor: pointer;
    font-size: 24px;
    padding-left: 8px;
  }
</style>